<template>
  <div class="contentLayout">
    <path-tracking :path='path' />
    <div class="pageContent">
      <el-tabs v-model="checkActiveName" @tab-click="checkHandleClick" class="checkTabNavs tabNavsBig">
        <el-tab-pane label="基本信息" name="basicInfo">
          <basicInfo :customerInfo="customerInfo" :memberInfo="memberInfo" :orderInfo="orderInfo" :cardInfo="cardInfo" :IntegraInfo="IntegraInfo" :expandInfo="expandInfo" @bookInfo="bookInfo" :id="id" @seeId="seeId" :isShowId="isShowId" :idCardText="idCardText" :idCardc="idCardc"  :isBuy="isBuy" :tagsInfo='tagsInfo'></basicInfo>
				</el-tab-pane>
				<el-tab-pane label="等级权益" name="classEquity">
          <levelEquity :levelHistory="levelHistory" :equityData="equityData"></levelEquity>
				</el-tab-pane>
        <el-tab-pane label="定制费账户" name="customizaAccount">
					<div class="integraLayout">
            <div class="seeIntegra">
              <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">定制费总览</div>
              </div>
              <ul>
                <!-- <li>
                  <h2>{{totalCustomiza.totalAccount}}</h2>
                  <span>总额</span>
                </li> -->
                <li>
                  <h2>{{totalCustomiza.remainingAccount}}</h2>
                  <span>余额</span>
                </li>
                <!-- <li>
                  <h2>{{totalCustomiza.usedAccount}}</h2>
                  <span>已使用金额</span>
                </li> -->
              </ul>
            </div>
            <div>
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">定制费明细</div>
                </div>
                <div class="formLayout">
                  <tabelcom
										:total="total"
										:pageSize="pageSize"
										:pageNum='pageNum'
										:pageTotal="pageTotal"
                     :tableData="customizaTableData"
                     :columns="customizaTableH"
                     :isSelection =true
                     :isHide="isHide"
                     @selectedHighlight="selectedHighlight"
                     @handleSelectionChange="handleSelectionChange"
                     @handleSizeChange="handleSizeChange"
                     @handleCurrentChange="handleCurrentChange"
                    ></tabelcom>
                </div>
            </div>
          </div>
				</el-tab-pane>
				<el-tab-pane label="积分账户" name="integraAccount">
          <div class="integraLayout">
            <div class="seeIntegra">
              <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">积分总览</div>
              </div>
              <ul>
                <li>
                  <h2>{{allIntegraData.availableScore}}</h2>
                  <span>可使用积分</span>
                </li>
                <li>
                  <h2>{{allIntegraData.expiringScore}}</h2>
                  <span>即将过期积分</span>
                </li>
                <li>
                  <h2>{{allIntegraData.usedScore}}</h2>
                  <span>已使用积分</span>
                </li>
              </ul>
            </div>
            <div>
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">积分明细</div>
                </div>
                <div class="formLayout">
                  <el-table
                  :data="integraDetailData"
                    >
                    <!-- <el-table-column
                      fixed
                      prop="date"
                      label="变动渠道"
                      width="150">
                    </el-table-column> -->
                    <el-table-column v-for="(item,index) in integraTableH" :label="item.label" 
                    :prop="item.prop" 
                    :key="index"
                    align="center"
                    >
                    </el-table-column>
                    <!-- <el-table-column
                      fixed="right"
                      label="备注"
                      width="100">
                      <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">备注</el-button>
                      </template>
                    </el-table-column> -->
                  </el-table>
                </div>
            </div>
          </div>
					<!-- <basicInfo :basicData="integraAccount"></basicInfo> -->
				</el-tab-pane>
				<el-tab-pane label="卡包账户" name="cardAccount">
          <cardInfo :cardHistoryData="cardHistoryData" :cardDetailData="cardDetailData" :cardWallet="cardWallet"></cardInfo>
				</el-tab-pane>
				<el-tab-pane label="交易历史" name="transactionHistory">
					<div class="integraLayout">
            <div class="seeTrade">
              <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">交易总览</div>
              </div>
              <ul>
                <li>
                  <h2>{{totalTransact.OrderQty}}</h2>
                  <span>订单数量</span>
                </li>
                <li>
                  <h2>{{totalTransact.TotalAmount}}</h2>
                  <span>订单总金额</span>
                </li>
                <li>
                  <h2>{{totalTransact.ReturnOrderQty}}</h2>
                  <span>退款订单</span>
                </li>
                <li>
                  <h2>{{totalTransact.TotalRefundAmount}}</h2>
                  <span>已退总金额</span>
                </li>
              </ul>
            </div>
            <div>
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">订单明细</div>
                </div>
                <div class="formLayout">
                  <tabelcom
										:total="total"
										:pageSize="pageSize"
										:pageNum='pageNum'
										:pageTotal="pageTotal"
                     :tableData="orderTableData"
                     :isHide="isHide"
                     @selectedHighlight="selectedHighlight"
                     :columns="orderTableH"
                     @handleSelectionChange="handleSelectionChange"
                     @handleSizeChange="handleSizeChange"
                     @handleCurrentChange="handleCurrentChange"
                    ></tabelcom>
                </div>
            </div>
          </div>
				</el-tab-pane>
				<el-tab-pane label="预约信息" name="bookInfo">
          <div class="bookLayout">
              <div class="bookInfoLayout">
                <div class="bookInfo">
                    <div class="tableTitle">
                      <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                      <div class="tableText">预约信息</div>
                    </div>
                    <ul>
                      <li>
                        <label>预约人</label>
                        <span>{{bookingInfo.name}}</span>
                      </li>
                      <li>
                        <label>性别</label>
                        <span>{{bookingInfo.sex}}</span>
                      </li>
                      <li>
                        <label>电话</label>
                        <span>{{bookingInfo.phone}}</span>
                      </li>
                    </ul>
                </div>
                
              </div>
              <div class="remarksHistory bookHistoryLayout" >
                <div class="tableTitle">
                    <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                    <div class="tableText">备注历史</div>
                </div>
                <ul  class="cateul" :class="showAddCategory? 'showdatalistclass': ''">
                  <li v-for="(item,index) in remarkHistory" :key="index">
                    <h2>
                      <label>{{item.createTime}}</label>
                      <span>{{item.content}}</span>
                    </h2>
                    <p>店员：<em>{{item.supportStaff}}</em></p>
                  </li>
                </ul>
                <!--收起 展开-->
                <div class="add_category_button" @click="addCategoryFun" v-show="statusBtn">
                  <img src="@/assets/img/icon_down.png"  v-if="showAddCategory"/>
                  <img src="@/assets/img/icon_up.png" v-else>
                  <span v-if="!showAddCategory">收起</span>
                  <span v-if="showAddCategory">展开</span>
                </div>
              </div>
              
              <!--预约历史次数-->
              <div class="bookList" v-for="(item,index) in bookListArr" :key="index" v-if='bookListArr'>
                <div class="tableTitle tableTitleBig">
                    <div class="tableIcon"></div>
                    <div class="tableText">{{item.num}}</div>
                </div>
                <div class="basicInfoLayout">
                    <div class="tableTitle">
                      <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                      <div class="tableText">预约信息</div>
                    </div>
                    <ul>
                      <li>
                        <label>预约单号</label>
                        <span>{{item.reservationInfo.reservationNumber}}</span>
                      </li>
                      <li>
                        <label>预约日期</label>
                        <span>{{item.reservationInfo.reservationStartTime ? item.reservationInfo.reservationStartTime.split(' ')[0] : ''}}</span>
                      </li>
                      <li>
                        <label>预约时段</label>
                        <span v-if='item.reservationInfo.reservationStartTime && item.reservationInfo.reservationStartTime'>{{item.reservationInfo.reservationStartTime.split(' ')[1]}}至{{item.reservationInfo.reservationEndTime.split(' ')[1]}}</span>
                      </li>
                      <li>
                        <label>预约来源</label>
                        <span>{{item.reservationInfo.source}}</span>
                      </li>
                      <li>
                        <label>预约地区</label>
                        <span>{{item.reservationInfo.area}}</span>
                      </li>
                      <li>
                        <label>预约门店</label>
                        <span>{{item.reservationInfo.shop}}</span>
                      </li>
                    </ul>
                </div>

                <div class="bookHistoryLayout">
                    <!--客服跟进-->
                    <div>
                        <div class="tableTitle">
                            <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                            <div class="tableText">客服跟进历史</div>
                        </div>
                        <ul>
                          <li v-for="(followItem,index) in item.reservationInfo.followUpRecords" :key="index" v-if="followItem.type == '2'">
                            <h2>
                              <label>{{followItem.createTime}}</label>
                              <span>{{followItem.content}}</span>
                            </h2>
                            
                          </li>
                          <!-- <li>
                            <h2 @click="showBtn(index)">
                              <span>展开</span>
                              <img src="@/assets/img/icon_down.png"/>
                            </h2>
                          </li> -->
                        </ul>
                    </div>
                    <!--门店跟进-->
                    <div class="bookHistoryLayout shopHistory" >
                      <div class="tableTitle">
                        <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                        <div class="tableText">门店跟进历史</div>
                      </div>
                      <ul>
                        <li v-for="(followItem,indexFl) in item.reservationInfo.followUpRecords" :key="indexFl" v-if="followItem.type == '3'">
                          <h2>
                            <label>{{followItem.createTime}}</label>
                          </h2>
                          <p>
                            <label>店员:<em>{{followItem.supportStaff}}</em></label>
                            <span>{{followItem.content}}</span>
                          </p>
                        </li>
                        <!-- <li>
                            <h2 @click="showBtn(index)">
                              <span>展开</span>
                              <img src="@/assets/img/icon_down.png"/>
                            </h2>
                          </li> -->
                      </ul>
                  </div>
                </div>
                <div class="bookInfoLayout">
                    <div class="tableTitle">
                      <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                      <div class="tableText">门店接待信息</div>
                    </div>
                    <ul>
                      <li>
                        <label>是否到店</label>
                        <span v-if="item.reservationInfo.isArrival == true">是</span>
                        <span v-else-if="item.reservationInfo.isArrival == false">否</span>
                      </li>
                      <li v-if="item.reservationInfo.gift">
                        <label>赠送礼物</label>
                        <span>{{item.reservationInfo.gift}}</span>
                      </li>
                      <li>
                        <label>到店时间</label>
                        <span>{{item.reservationInfo.arrivalTime}}</span>
                      </li>
                    </ul>
                </div>

              </div>
          </div>

				</el-tab-pane>
				<el-tab-pane label="回访记录" name="returnVisitRecord">
          <returnRecord :returnRecordData="returnRecordData" @showFile="showFile" @showStatus="showStatus" :indexRecord='indexRecord' :indexn='indexn' :showImg='showImg' :showName="showName" ></returnRecord>
				</el-tab-pane>
        <el-tab-pane label="操作日志" name="operationLog">
          <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
            <div class="tableText">操作日志</div>
          </div>
          <div class="formLayout">
            <el-table :data="operateLogData">
              <el-table-column 
              v-for="(item,index) in operateLogTableH" 
              :prop="item.prop" 
              :label="item.label" 
              align="center"
              :key="index">
            </el-table-column>
            </el-table>
          </div>
				</el-tab-pane>
      </el-tabs>

    </div>
  </div>

</template>
<script>
import basicInfo from './basicInfo/index'
import cardInfo from './cardInfo/index' //卡包 
import levelEquity from './levelEquity/index' //等级权益
import returnRecord from './returnRecord/index' //回访记录
import tabelcom from '../../components/pages/table'
import pathTracking from '@/components/common/pathTracking'
import datas from './datas.js'
export default {
  name: 'checkCustomerDetail',
  components:{
    basicInfo,
    cardInfo,
    levelEquity,
    returnRecord,
    pathTracking,
    tabelcom
  },
  data(){
    return{
      path: ['CRM', '客户管理', {label: '客户列表', name: 'customerList'}, '查看'],
      checkActiveName: 'basicInfo',
      classEquity:datas.classEquity, //等级权益
      integraTableH:datas.integraTableH,//积分账户
      cardTableH:datas.cardTableH, //卡包账户 卡包明细表格 表头
      cardHistoryH:datas.cardHistoryH, //卡包账户 使用历史表格 表头
      operateLogTableH:datas.operateLogTableH, //操作日志表格表头
      customizaTableH:datas.customizaTableH,//定制费表格表头
      orderTableH:datas.orderTableH,
      showAddCategory: true,
      statusBtn:true,//是否展示收起 展开按钮

      id:'',//用户
      isBuy:'',//是否购买
      isHide:false, //是否显示table组件的按钮
      isShowId:true, //是否显示完成身份证号码
      idCardText:'查看',
      idCardc:'',
      //isReturn:true,//是否显示

			total:1, //总条数
			pageSize:10, //每页多少条
      pageNum:1,//当前第几页
      pageTotal:1,//总页码

      //查看页面里面的信息
      customerInfo:{},//基本信息
      tagsInfo:[],//基本信息-标签
      memberInfo:{},//基本信息---会员信息
      cardInfo:{},//基本信息---卡券信息
      orderInfo:{},//基本信息 -- 订单信息
      IntegraInfo:{},//基本信息 --积分信息
      expandInfo:{},//基本信息 -- 拓展
      levelHistory:[],//会员等级
      equityData:[],//会员权益
      cardWallet:[], //卡包总览
      cardDetailData:[],//卡包信息
      cardHistoryData:[],//卡包历史信息
      returnRecordData:[],//回访记录
      allIntegraData:{}, //积分总览
      integraDetailData:[],//积分明细
      totalCustomiza:{}, //定制费总览
      customizaTableData:[], //定制费表格内容
      totalTransact:{},//交易订单总览
      orderTableData:[], //交易订单明细
      bookingInfo:{},//预约信息
      remarkHistory:[], //预约信息中的备注历史
      bookListArr:[],//预约次数内容列表
      operateLogData:[],//操作日志

      indexRecord:0,
      indexn:0,
      showImg:false,
      showName:true
    }
  },
  methods:{
    checkHandleClick (tab, event) {
      switch(tab.name){
        case 'customizaAccount'://定制费账户
            this.getCustomizaTotal(this.id);
            this.getCustomizaDetail(this.id);
            break; 
        case 'transactionHistory'://交易历史
            this.getTransactHistory(this.id);
            this.getTransactDetail(this.id)
            break; 
        default:
          //this.getBasicInfo(this.id);
          break;
      }
      // switch(tab.name){
      //   case 'basicInfo': //基本资料
      //       this.getBasicInfo(this.id);
      //       break;
      //   case 'classEquity': //等级权益
      //       this.getMemberLevel(this.id);
      //       this.getMemeberEquity(this.id)
      //       break; 
      //   case 'customizaAccount'://定制费账户
      //       this.getCustomizaTotal(this.id);
      //       this.getCustomizaDetail(this.id);
      //       break; 
      //   case 'integraAccount': //积分账户
      //       this.getIntegraDetail(this.id);
      //       break; 
      //   case 'cardAccount': //卡包账户
      //       this.getCardAllWallet(this.id);
      //       this.getCardInfo(this.id);
      //       break; 
      //   case 'transactionHistory'://交易历史
      //       this.getTransactHistory(this.id);
      //       this.getTransactDetail(this.id)
      //       break; 
      //   case 'bookInfo'://预约信息
      //       this.getBookInfo(this.id);
      //       break; 
      //   case 'returnVisitRecord':
      //       this.getReturnRecord(this.id);//回访记录
      //       break; 
      //   case 'operationLog'://操作日志
      //       this.getOperateLog(this.id);
      //       break; 
      //   default:
      //     //this.getBasicInfo(this.id);
      //     break;
      // }
    },
    toJump(){
      this.$router.replace({name:'customerList'})
    },
    toCancel(){
      this.$router.replace({name:'customerList'})
    },
    addCategoryFun(index){
      this.showAddCategory = !this.showAddCategory;
    },
    // addCategoryFun(){
    //   this.showAddCategory = !this.showAddCategory;
    // },
    bookInfo(){
      this.checkActiveName = "bookInfo"
    },
    //展示完整身份证号
    seeId(){
      this.isShowId = !this.isShowId;
      if(this.isShowId == true){
        this.idCardText = '查看'
      }else{
        this.idCardText = '隐藏'
      }
    },
    //回访记录 点击图片链接展示图片
    showFile(index,n){
      this.indexRecord = index;
      this.indexn = n ;
      // this.indexRecord = n;
      this.showImg = true;
      //this.showName =false
    },
    showStatus(index,n){
      this.indexRecord = index;
      this.indexn = n;
      this.showImg = true
    },

    showBtn(index){
      console.log('hahahaha',index)
    },

    handleSelectionChange (selection) {
      // 选中的数组
      //this.TableSelectData = selection
    },
    selectedHighlight (data) {
      // 如果选中则添加高亮样式
      if (this.TableSelectData.indexOf(data.row) > -1) {
        return {
          'background-color': '#FEF6EE'
        }
        return {}
      }
    },
    // 分页
    handleSizeChange (val) { //每页多少条
      this.pageSize = val;
      this.getCustomizaDetail(this.id);
    },
    handleCurrentChange (val) { //当前第几页
      this.pageNum = val;
      this.getCustomizaDetail(this.id)
    },

    //获取预约信息
    getBookInfo(id){
      var that = this;
      that.$ajax({
        method:'GET',
        url:api.crm + '/customerInfo/findReservationInfo?id=' + id,
      }).then((res) => {
        var data = res.data;
        that.remarkHistory = [];
        if(data.status == 200){
          that.bookingInfo = data.result; //预约信息
          var remarkRecords = data.result.followUpRecords//备注历史
          if(remarkRecords){
            that.statusBtn = false
            that.remarkHistory = remarkRecords 
          }else{
            that.statusBtn = false
          }
          var bookList = data.result.cReservationResps;//预约列表
          if(bookList.length > 0){
            that.bookListArr = bookList
          }
        }

      })
    },

    //获取基本信息
    getBasicInfo(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/customerInfo/' + id,
        url:api.crm + '/customerInfo/' + id,
      }).then((res) => {
        var data = res.data;
        if(data.status == 200){
          that.memberInfo = data.result.memberInfoVo; //会员信息
          that.orderInfo = data.result.orderTotalDTO; //订单信息
          that.cardInfo = data.result.cardInfoVo;//卡券信息
          that.IntegraInfo = data.result.scoreInfoVo; //积分
          that.expandInfo = data.result.expandInfoVo; //拓展
          that.customerInfo = data.result.customerInfo;
          that.tagsInfo = data.result.customerInfo.systemTagCategoryVO.systemTagGroups;
          var idCard = data.result.customerInfo.idCard;
          var idCarda = idCard.substring(0,3);
          var idCardb = idCard.substring(idCard.length-3);
          if(idCard !== ''){
            that.idCardc = idCarda + '****' +idCardb;
          }
        }else{
          // that.$message({
          //   message: '获取基本信息数据失败',
          //   type: 'warning'
          // });
        }
      }).catch((err) => {
        //  that.$message({
        //     message: err.data.msg,
        //     type: 'warning'
        //   });
      })
    },

    //获取会员等级数据
    getMemberLevel(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/levelInfo/record/customer/' + id,
        url:api.crm + '/levelInfo/record/customer/' + id,
      }).then((res) => {
        var data = res.data;
        if(data.status == 200){
          that.levelHistory = [];
          var levelArr = data.result;
          if(levelArr){
            var levelObj = {};
            for(var i =0;i<levelArr.length;i++){
              levelObj = {
                //currentLevel:levelArr[i].currentLevel,
                originalLevel:levelArr[i].originalLevel,
                createTime:levelArr[i].createTime,
                currentLevel:levelArr[i].currentLevel
              }
              if(levelArr[i].currentLevel == '1'){
                levelObj.currentLevel == 'v1'
              }else if(levelArr[i].currentLevel == '2'){
                levelObj.currentLevel == 'v2'
              }else if(levelArr[i].currentLevel == '3'){
                levelObj.currentLevel == 'v3'
              }else if(levelArr[i].currentLevel == '4'){
                levelObj.currentLevel == 'v4'
              }else if(levelArr[i].currentLevel == '5'){
                levelObj.currentLevel == 'v5'
              }

              that.levelHistory.push(levelObj)
            }
          }
        }
      })
    },

    //获取会员权益数据
    getMemeberEquity(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/rightsConf/record/rights/' + id,
        url:api.crm + '/rightsConf/record/rights/' + id,
      }).then((res) => {
        that.equityData = []
        var data = res.data;
        var equityArr = data.result;
        var equityObj = {};
        if(data.status == 200){
          if(equityArr){
            that.equityData = equityArr
            // for(var i =0;i<equityArr.length;i++){
            //   equityObj = {
            //     name:equityArr[i].name
            //   }
            //   that.equityData.push(equityObj)
            // }
          }
        }
      })
    },

    //获取定制费用户总览
    getCustomizaTotal(id){
      var that = this;
      that.$ajax({
        method:'GET',
        url:api.crm + '/accountRecord/getTotalAccount/' + id,
        //url:that.apiCrm + '/accountRecord/getTotalAccount/' + id,
      }).then((res) => {
        var data = res.data;
        if(data.status == 200){
          that.totalCustomiza = data.result
        }else{

        }
      })
    },
    //获取定制费详情
    getCustomizaDetail(id){
      var that = this;
      that.pageNum = 1;
      that.pageSize = 10;
      this.$ajax({
        //url:that.apiCrm + '/accountRecord/querylist/' + that.pageSize + '/'+ that.pageNum,
        url:api.crm + '/accountRecord/querylist/' + that.pageSize + '/'+ that.pageNum,
				method:'POST',
				data:{accoutType:'2',customerId:id},
			}).then((res) => {
            var data = res.data;
            that.customizaTableData = []
            if(data.status == 200){
              that.total = data.result.total;  //全部条数
              that.pageNum = data.result.pageNum; //当前页
              that.pageSize = data.result.pageSize; //每页数量
              that.pageTotal = data.result.pages; //总页数
              var customizaArr = data.result.list;
              if(customizaArr){
                var tdObj = {};
                for(var i=0;i<customizaArr.length;i++){
                  tdObj = {
                    changingWay:customizaArr[i].changingWay,//渠道
                    changingReason:customizaArr[i].changingReason,//原因
                    orderId:customizaArr[i].orderId,
                    changingAccount:customizaArr[i].changingAccount,//变动金钱
                    createTime:customizaArr[i].createTime,
                    operatingPersonnel:customizaArr[i].operatingPersonnel,//操作人
                    remark:customizaArr[i].remark,
                  }
                  that.customizaTableData.push(tdObj)
                }
              }
             
            }
          })
    },

    //获取积分账户数据
    getIntegraDetail(id){
      var that = this;
      that.$ajax({
        method:'GET',
        url:api.crm + '/accountRecord/getScoreDetailById?id=' +   id,
        //url:'/api/accountRecord/getScoreDetailById?id=' + id,
      }).then((res) => {
        var data = res.data;
        if(data.status == 200){
          that.integraDetailData =[]
          if(data.result){
            that.allIntegraData = data.result;
            var integraDetail = data.result.accountRecords;
            var detailObj = {}
            for(var i=0;i<integraDetail.length;i++){
              detailObj = {
                changingWay:integraDetail[i].changingWay, //变动渠道
                changingReason:integraDetail[i].changingReason, //变动原因
                changingDate:integraDetail[i].changingDate,//变动时间
                changingAccount:integraDetail[i].changingAccount,//变动积分
                remainingAccount:integraDetail[i].remainingAccount,//剩余积分
                orderId:integraDetail[i].orderId,//订单编号
                status:integraDetail[i].status,//状态
                purpose:integraDetail[i].purpose,//用途
                effectiveDateStart:integraDetail[i].effectiveDateStart,//生效时间
                effectiveDateEnd:integraDetail[i].effectiveDateEnd,//过期时间
                operatingPersonnel:integraDetail[i].operatingPersonnel,//操作人
                remark:integraDetail[i].remark//备注
              }
              if(integraDetail[i].type == 1) {
                if(integraDetail[i].status == -1){
                  detailObj.status = '部分激活'
                }else if(integraDetail[i].status == 0){
                  detailObj.status = '未激活'
                }else if(integraDetail[i].status == 1){
                  detailObj.status = '激活'
                }
              }else {
                if(integraDetail[i].status == -1){
                  detailObj.status = '占用'
                }else if(integraDetail[i].status == 0){
                  detailObj.status = '未使用'
                }else if(integraDetail[i].status == 1){
                  detailObj.status = '已使用'
                }
              }
              
              that.integraDetailData.push(detailObj);
            }
          }
          
        }
      })
    },

    //获取卡包总览数据
    getCardAllWallet(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/cardHolderInfo/preview/' + id,
        url:api.crm + '/cardHolderInfo/preview/' + id,
      }).then((res) => {
        that.cardWallet = [];
        if(res.data.status == 200){
          let cardAllWallet = res.data.result; //卡包总览Arr
          if(cardAllWallet.length > 0){
            var liObj = {};
            for(var i =0;i<cardAllWallet.length;i++){

              liObj = {
                count:cardAllWallet[i].count
              }
              if(cardAllWallet[i].status == 1){
                liObj.status = '可用卡券';
                liObj.id = 1
              }else if(cardAllWallet[i].status == 2){
                liObj.status = '已使用卡券';
                liObj.id = 2
              }else if(cardAllWallet[i].status == 3){
                liObj.status = '已过期卡券';
                liObj.id = 3
              }
              that.cardWallet.push(liObj);
            }
          }
        }
      })
      .catch((msg) => {
        console.log('失败了',msg)
      })
    },

    //获取卡包信息数据
    getCardInfo(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/cardHolderInfo/record/' + id,
        url:api.crm + '/cardHolderInfo/record/' + id,
      }).then((res) => {
        var data = res.data;
        if(data.status == 200){
          that.cardDetailData = []
          var detailArr = data.result.detail;//卡包明细
          if(detailArr){
              var tdObj = {};
              for(var i =0;i<detailArr.length;i++){
                tdObj = {
                  getWay:detailArr[i].getWay,
                  getDate:detailArr[i].getDate,//时间
                  //cardType:detailArr[i].cardType, //类型
                  cardDetail:detailArr[i].cardDetail,//卡券明细
                  effectiveDate:detailArr[i].effectiveDate,//生效时间
                  overdueDate:detailArr[i].overdueDate,//过期时间
                  operatingPersonnel:detailArr[i].operatingPersonnel,//操作人
                  //status:detailArr[i].status //状态
                }
                if(detailArr[i].getReason == 1) {
                  tdObj.getReason = '购买'
                }else if(detailArr[i].getReason == 2) {
                  tdObj.getReason = '等级赠送'
                }else if(detailArr[i].getReason == 3) {
                  tdObj.getReason = '购买总额够送'
                }else if(detailArr[i].getReason == 4) {
                  tdObj.getReason = '指定产品赠送'
                }else if(detailArr[i].getReason == 5) {
                  tdObj.getReason = '后台礼品发放'
                }else if(detailArr[i].getReason == 6) {
                  tdObj.getReason = '黑白券'
                }else if(detailArr[i].getReason == 7) {
                  tdObj.getReason = '心意卡'
                }else if(detailArr[i].getReason == 8) {
                  tdObj.getReason = '预约到店赠送礼品券'
                }else if(detailArr[i].getReason == 9) {
                  tdObj.getReason = '终身服务卡'
                }else if(detailArr[i].getReason == 10) {
                  tdObj.getReason = '幸运抽奖'
                }else if(detailArr[i].getReason == 11) {
                  tdObj.getReason = '连续打卡'
                }else if(detailArr[i].getReason == 12) {
                  tdObj.getReason = '预约到店礼券'
                }
                
                if(detailArr[i].cardType == '1'){
                  tdObj.cardType = 'DR优惠卡'
                }else if(detailArr[i].cardType == '2'){
                  tdObj.cardType = '消费券'
                }else if(detailArr[i].cardType == '3'){
                  tdObj.cardType = '邀新券'
                }else if(detailArr[i].cardType == '4'){
                  tdObj.cardType = '礼品券'
                }else if(detailArr[i].cardType == '5'){
                  tdObj.cardType = '钻石券'
                }
                if(detailArr[i].status == 0){
                  tdObj.status = '未过期'
                }else if(detailArr[i].status == 1){
                  tdObj.status = '过期'
                }
                that.cardDetailData.push(tdObj)
              }
            }
          }

          var usedRecord = data.result.used; //使用历史
          if(usedRecord){
            let tdHisObj = {},arr = [];
            for(let i = 0;i < usedRecord.length;i++){
              tdHisObj = {
                usedWay:usedRecord[i].usedWay,
                purpose:usedRecord[i].purpose,
                orderId:usedRecord[i].orderId,
                cardType:usedRecord[i].cardType,
                cardDetail:usedRecord[i].cardDetail,
                createTime:usedRecord[i].createTime,
                operatingPersonnel:usedRecord[i].operatingPersonnel,
              }
              arr.push(tdHisObj)
            }
            that.cardHistoryData = arr
          }
      })
    },

    //交易历史 transactionHistory
    getTransactHistory(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/orderRecord/queryOrderTotal/' + id,
        url: api.crm + '/orderRecord/queryOrderTotal/' + id,
      }).then((res) => {
        if(res.data.status == 200 && res.data.result){
          var transactInfo = res.data.result;
          if(transactInfo.OrderQty == null){
            transactInfo.OrderQty = 0
          }
          if(transactInfo.TotalAmount == null){
            transactInfo.TotalAmount = 0
          }
          if(transactInfo.ReturnOrderQty == null){
            transactInfo.ReturnOrderQty = 0
          }
          if(transactInfo.TotalRefundAmount == null){
            transactInfo.TotalRefundAmount = 0
          }
          that.totalTransact = res.data.result;
        }else {
          that.totalTransact = {}
        }
      })
    },

    //获取交易明细
    getTransactDetail(id){
      var that = this;
      that.pageNum = 1;
      that.pageSize = 10;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/orderRecord/queryOrderDetail/1802619',
        url: api.crm + '/orderRecord/queryOrderDetail/' + that.pageSize + '/'+ that.pageNum +'/'+ id,
      }).then((res) => {
        that.orderTableData = []
        var data = res.data;
        if(data.status == 200){
          that.total = data.result.total;  //全部条数
          that.pageNum = data.result.pageNum; //当前页
          that.pageSize = data.result.pageSize; //每页数量
          that.pageTotal = data.result.pages; //总页数
          var tdObj = {};
          var detailArr = data.result.list;
          for(var i=0;i<detailArr.length;i++){
            tdObj = {
              ChannelName:detailArr[i].ChannelName, //渠道
              OrderID:detailArr[i].OrderID,//订单编号
              //ReturnOrderID:detailArr[i].ReturnOrderID,//退货单号
              PayState:detailArr[i].PayState,
              Amount:detailArr[i].Amount,//订单金额
              DiscountAmount:detailArr[i].DiscountAmount,//优惠金额
              PayableAmount:detailArr[i].PayableAmount,//应付金额
              //OrderState:detailArr[i].OrderState, //少了订单状态
              OrderTime:detailArr[i].OrderTime, //下单时间
              FirstPayTime:detailArr[i].FirstPayTime, //支付时间
              PaidAmount:detailArr[i].PaidAmount, //支付金额
              RefundAmount:detailArr[i].RefundAmount, //退货单
            }
            var orderState = detailArr[i].OrderState;
            if(orderState == 100){
              tdObj.OrderState = '待审批'
            }else if(orderState == 200){
              tdObj.OrderState = '已审批'
            }else if(orderState == 700){
              tdObj.OrderState = '已发货'
            }else if(orderState == 800){
              tdObj.OrderState = '已发货'
            }else if(orderState == 900){
              tdObj.OrderState = '已作废'
            }else if(orderState == 0){
              tdObj.OrderState = '待付款'
            }else if(orderState == 1){
              tdObj.OrderState = '部分付款'
            }else if(orderState == 200){
              tdObj.OrderState = '已付款'
            }

            if(detailArr[i].PayState == 0){
              tdObj.PayState = '待付款'
            }else if(detailArr[i].PayState == 1){
              tdObj.PayState = '部分付款'
            }else if(detailArr[i].PayState == 2){
              tdObj.PayState = '已付款'
            }
            that.orderTableData.push(tdObj)
          }
        } 
        

      })
    },

    //回访记录数据
    getReturnRecord(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/callbackRecord/' + id,
        url: api.crm + '/callbackRecord/' + id,
      }).then((res) => {
        var data = res.data;
        that.returnRecordData = []
        if(data.status == 200){
          var returnRecord = data.result;
          //var recordObj = {};
          if(returnRecord){
            that.returnRecordData = returnRecord
          }
        }
      })
    },
    
    //操作日志
    getOperateLog(id){
       var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiIntegra + '/operationLog/customer?customerId=' + id,
        url: api.crm + '/operationLog/customer?customerId=' + id,
      }).then((res) => {
        that.operateLogData = [];
        var data = res.data;
        if(data.status == 200){
          var logArr = data.result;
          var logObj = {}
          if(logArr){
            for(var i=0;i<logArr.length;i++){
              logObj = {
                operatingPersonnel:logArr[i].operatingPersonnel,//操作人
                type:logArr[i].type,//变动类型
                content:logArr[i].content,//变动内容
                operatingDate:logArr[i].operatingDate,//变动时间
              }
              that.operateLogData.push(logObj)
            }
          }
        }
      })
    },
    initPage() {
      this.id = this.$route.query.id;
      this.checkActiveName = 'basicInfo';
      this.isBuy = this.$route.query.isBuy;
      this.getMemberLevel(this.id);
      this.getMemeberEquity(this.id)
      this.getCardAllWallet(this.id);
      this.getCardInfo(this.id);
      this.getReturnRecord(this.id);
      this.getCustomizaTotal(this.id);
      this.getCustomizaDetail(this.id);
      this.getIntegraDetail(this.id);
      this.getTransactHistory(this.id);
      this.getTransactDetail(this.id);
      this.getBasicInfo(this.id);
      this.getBookInfo(this.id);
      this.getOperateLog(this.id)
    }
  },
    // activated() {
    //   this.initPage()
    // },
    created(){
      //console.log('传过来的客户ID',this.$route.query.id);
      this.initPage()
    }
}
</script>

<style >
@import '../../components/css/viewCommon.css';
</style>

<style scoped>
/deep/.items{
    margin-bottom:24px; 
}
.pageContent{
  padding: 0 16px 16px 16px;
}
.integraLayout{
  background-color: #fff
}
/*积分*/
.seeIntegra ul,.seeTrade ul{
  display: flex;
  justify-content: center;
  height: 98px;
}
.seeIntegra ul li,.seeTrade ul li{
  width: 250px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-right: 22px;
  color: #fff;
  padding: 18px 0;
  border-radius: 8px
}
.seeIntegra ul li:first-child{
    background-image: linear-gradient(-90deg, 	#9db919 0%, 	#bcc92b 100%), linear-gradient(#ffffff, #ffffff);
    background-blend-mode: normal, normal;
}
.seeIntegra ul li:nth-child(2){
    background-image: linear-gradient(-90deg, #d85c30 0%, #e87d26 100%),
    linear-gradient( #e67828, #e67828);
    background-blend-mode: normal, normal;
}

.seeIntegra ul li:nth-child(3){
    background-image: linear-gradient(-90deg, #eab71b 0%, #edcb2a 100%),
    linear-gradient(#eab91d, #eab91d);
    background-blend-mode: normal, normal;
}
.seeIntegra ul li:last-child,seeTrade ul li:last-child{
      margin-right: 0
}
.seeIntegra ul li h2,.seeTrade ul li h2{
    font-size: 30px;
    /* margin-bottom: 26px; */
}
.seeIntegra ul li span,.seeTrade ul li span{
    color: #fff;
    font-size: 14px;
}
/*交易账户*/
.seeTrade ul li:first-child{
  background-image: linear-gradient(-90deg, #9db919 0%,	#bcc92b 100%), linear-gradient(	#ffffff,#ffffff);
	background-blend-mode: normal, normal;
}
.seeTrade ul li:nth-child(2){
  background-image: linear-gradient(-90deg, 	#eab71b 0%,#edcb2a 100%),linear-gradient(#e67828, #e67828);
	background-blend-mode: normal, normal;
}
.seeTrade ul li:nth-child(3){
  background-image: linear-gradient(-90deg, #d85c30 0%, #e87d26 100%), linear-gradient(	#eab91d,#eab91d);
	background-blend-mode: normal, normal;
}
.seeTrade ul li:nth-child(4){
  background-image: linear-gradient(-90deg, #bc3f3f 0%,	#e75a5a 100%), linear-gradient(	#eab91d, #eab91d);
	background-blend-mode: normal, normal;
}

/*预约信息*/
.bookLayout,.bookInfoLayout{
  background-color: #fff;
  padding-bottom: 24px
}
.bookInfoLayout ul,.bookHistoryLayout ul{
  background-color: #fff;
  padding: 0 24px
}
.bookInfoLayout ul li{
  width: 24%;
  display: inline-block;
  font-size: 14px
}
.bookInfoLayout ul li label{
  color: #888;
}
.bookInfoLayout ul li span{
  color: #222;
}

.bookHistoryLayout ul li h2{
  margin-bottom: 20px
}
.bookHistoryLayout ul li h2 label{
  color: #888;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  display: inline-block;
  margin-right: 48px;
  width: 140px;
  text-align: right
}
.bookHistoryLayout ul li h2 span{
  color: #222;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.bookHistoryLayout ul li{
  margin-bottom: 24px
}
.remarksHistory ul li p{
  text-align: right;
  color: #888;
  font-size: 14px
}
.remarksHistory ul li p{
  width: 140px;
}
/*首次预约*/
.tableTitle.tableTitleBig{
  height: 40px;
}
.tableTitle.tableTitleBig .tableText{
  font-size: 16px;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  color: #222;
  font-weight: normal;
}
.bookList .basicInfoLayout ul li{
  width: 24%
}
.bookList{
  border-top: 1px #f3f3f3 solid;
}
.shopHistory ul li p{
  font-size: 14px;
}
.shopHistory ul li p label{
  display: inline-block;
  width: 140px;
  text-align: right;
  margin-right: 48px;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  color: #888
}

.add_category_button{
  text-align: center;
  line-height: 30px;
  transition: all 400ms;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #7e6b5a;
  font-family: "Microsoft Yahei",sans-serif;
  margin: 14px 0 20px 0;
}

.add_category_button:hover {
  cursor: pointer;
}

.cateul{
  height: auto;
  transition: height 0.5s;
  overflow: hidden;
}
.showdatalistclass{
  height: 60px;
  overflow: hidden;
}

</style>
